<template>
    <div class="wrapper">
        <bui-tabbar :tabItems="tabItems" 
                    showSelectedLine=true 
                    @change="onItemChange" 
                    v-model="currentTab"
                    background="#FFFFFF"
                    selectedBackground="#FFFFFF"
                    normalColor="#666666"
                    selectedColor="#f49428"
                    borderBottomColor="#f49428"
                    titleSize="30px"></bui-tabbar>

        <slider class="slider" @change="onSliderChange" :index="currentTab">

            <scroller class="container" :style="scrollerStyle">
                <wxc-cell title="维保单号" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.upkeepNumber}}</text>
                </wxc-cell>

                <wxc-cell title="电梯位置" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.address+data.comName}}</text>
                </wxc-cell>

                <wxc-cell title="上次保养日期" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.lastUpkeep}}</text>
                </wxc-cell>

                <wxc-cell title="保养日期" :has-margin="true" :has-bottom-border="false" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.nextUpkeep}}</text>
                </wxc-cell>

                <!-- 未接单状态 -->
                <wxc-cell v-if="data.status == 0 || data.status == 3" title="保养类型" :cell-style="cellStyle" :has-arrow="true" 
                                        @wxcCellClicked="showLastUpkeepType">
                <text :style="valueStyle">{{upkeepType}}</text>
                </wxc-cell>

                <!-- 已接单状态 -->
                <wxc-cell  v-if="data.status !== 0 && data.status !== 3" title="保养类型" :cell-style="cellStyle">
                <text :style="valueStyle">{{upkeepType}}</text>
                </wxc-cell>
                
                <div>
                    <wxc-cell title="保养内容" :cell-style="cellStyle" :has-bottom-border="false">
                        <switch slot="value" checked="true" @change="switchContent"></switch>
                    </wxc-cell>
                    <div v-if="showContent">
                        <wxc-cell :cell-style="contentCellStyle" :has-bottom-border="false"  v-for="item in upkeepContentList">
                        <text :style="contentValueStyle">{{item.content}}</text>
                        </wxc-cell>
                    </div>
                </div>
                <div style="margin-top:20">
                    <wxc-cell title="维保人员一" :cell-style="cellStyle">
                    <text :style="valueStyle">{{data.staff1Name}}</text>
                    </wxc-cell>

                    <!-- 未接单 -->
                    <wxc-cell v-if="data.status == 0 || data.status == 3" title="维保人员二" :has-arrow="true"  
                                                :has-bottom-border="false" 
                                                :cell-style="cellStyle"
                                                @wxcCellClicked="pickTeammates">
                    <text :style="valueStyle">{{staff2Name}}</text>
                    </wxc-cell>

                    <!-- 已接单 -->
                    <wxc-cell v-if="data.status !== 0 && data.status !== 3" title="维保人员二" :has-bottom-border="false" :cell-style="cellStyle">
                    <text :style="valueStyle">{{staff2Name}}</text>
                    </wxc-cell>
                </div>

                
                <!-- 0未接单 1已接单 2完成 3退单   -->
                <div v-if="data.status !== 2">
                    <div v-if="data.status === 0 || data.status === 3" class="div-button" >
                        <wxc-button text="确认接单"
                            size="full"
                            btnStyle="{backgroundColor:'#f3624f',borderColor: '#f3624f'}"
                            textStyle="{color:'#ffffff'}"
                            @wxcButtonClicked="acceptUpkeep()"></wxc-button>
                    </div>
                    <div v-if="data.status !==0 && data.status !==3">
                        <div class="div-button">
                            <wxc-button text="退单"
                            type="white"
                            size="big"
                            :btnStyle="btnStyle"
                            :textStyle="text1Style"
                            @wxcButtonClicked="backUpkeep()"></wxc-button>
                            <wxc-button text=上传
                            type="white"
                            size="big"
                            :btnStyle="btnStyle"
                            :textStyle="text2Style"
                            @wxcButtonClicked="goToUpload()"></wxc-button>
                        </div>
                        <div class="div-button">
                            <wxc-button text="完成"
                                size="full"
                                btnStyle="{backgroundColor:'#f3624f',borderColor: '#f3624f'}"
                                textStyle="{color:'#ffffff'}"
                                style="margin-bottom:20"
                                @wxcButtonClicked="handleComplete()"></wxc-button>
                        </div>
                    </div>
                </div>
                <div v-if="data.status === 2" class="div-button">
                    <wxc-button text="额外信息"
                        size="full"
                        btnStyle="{backgroundColor:'#f3624f',borderColor: '#f3624f'}"
                        textStyle="{color:'#ffffff'}"
                        style="margin-bottom:20"
                        @wxcButtonClicked="goToOverPage()"></wxc-button>
                </div>
            </scroller>


            <scroller class="container" :style="scrollerStyle">
                <wxc-cell title="电梯工号" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.number}}</text>
                </wxc-cell>

                <wxc-cell title="内部编号" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.inNumber}}</text>
                </wxc-cell>

                <wxc-cell title="电梯型号" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.typeNumber}}</text>
                </wxc-cell>

                <wxc-cell title="维保单位" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.upkeep}}</text>
                </wxc-cell>

                <wxc-cell title="额定载重" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.loader}}</text>
                </wxc-cell>

                <wxc-cell title="额定速度" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.speed?data.speed+'m/s':''}}</text>
                </wxc-cell>

                <wxc-cell title="层/站/门" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.style}}</text>
                </wxc-cell>

                <wxc-cell title="智能硬件序列号" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.smartNumber}}</text>
                </wxc-cell>

                <wxc-cell title="下次年检日期" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.nextAnnual}}</text>
                </wxc-cell>

                <wxc-cell title="上次维保日期" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.lastUpkeep}}</text>
                </wxc-cell>

                <wxc-cell title="最后更新时间" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.updateTime}}</text>
                </wxc-cell>

                <wxc-cell title="使用单位" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.comName}}</text>
                </wxc-cell>

                <wxc-cell title="安装单位" :cell-style="cellStyle">
                <text :style="valueStyle">{{data.installer}}</text>
                </wxc-cell>
            </scroller>
        </slider>

        <wxc-dialog title="最近一次保养简报"
                :content="lastUpkeepType"
                :show="showDialog"
                @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked"
                @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked">
        </wxc-dialog>
        <wxc-loading :show="showLoading" :need-mask="mask"></wxc-loading>
    </div>

</template>
<script>
    import { WxcTabPage, Utils,WxcCell,WxcButton,WxcLoading,WxcDialog } from 'weex-ui';
    import {buiTabbar} from 'bui-weex';
    const picker = weex.requireModule('picker')
    var utilModule = weex.requireModule('UtilModule')
    export default {
        components:{
            WxcTabPage,
            Utils,
            WxcCell,
            WxcButton,
            WxcLoading,
            WxcDialog ,
            buiTabbar
        },
        data () {
            return{
                token:'',
                currentTab:0,
                tabItems: [
                    {
                        title: "保单信息",
                    },
                    {
                        title: "电梯信息"
                    },
                ],
                valueStyle:{
                    color:'#999999',
                },
                cellStyle:{
                    height:'90px'
                },
                contentValueStyle:{
                    color:'#999999',
                    fontSize:'25px',
                },
                contentCellStyle:{
                    height:'20px'
                },
                text1Style:{
                    color:'#ea9527'  
                },
                text2Style:{
                    color:'#f35e4d'  
                },
                btnStyle:{
                    backgroundColor:'#ffffff',
                    borderColor: '#dfdfdf',
                },
                data:{},
                showDialog:false,
                showContent:true,
                showLoading:false,
                mask:true,
                lastUpkeepType:'无数据',
                upkeepTypeList:[],
                chooseTypeList:[],
                upkeepContentList:[],
                myteamMatesList: [],
                chooseMatesList:[],
                upkeepType:'',
                upkeepTypeId:'',
                staff2Name:'',
                formItem:{}
                
            }
        },
        methods: {
            showLastUpkeepType(){
                this.showDialog = true
            },
            wxcDialogCancelBtnClicked(){
                this.showDialog = false
            },
            wxcDialogConfirmBtnClicked(){
                this.showDialog = false
                this.pickUpkeepType()
            },
            switchContent(){
                this.showContent = !this.showContent
            },
            goToUpload(){
                //跳转上传页
                this.$router.open({
                    name: 'uploadPage',
                    params:{upkeepDetail:this.data}
                })
            },
            goToOverPage(){
                //跳转额外信息页
                this.$router.open({
                    name: 'overPage',
                    params:{upkeepDetail:this.data}
                })
            },
            pickUpkeepType() {
                picker.pick({
                    items: this.chooseTypeList,
                    index:0,
                    // textColor:'#ffffff',
                    confirmTitleColor:'#f49428',
                    // cancelTitleColor:'#ffffff',
                    // titleColor: '#ffffff',
                    title: '请选择'
                }, event => {
                    if (event.result === 'success') {
                        var upkeepContent = this.upkeepTypeList[event.data]
                        this.upkeepType = upkeepContent.name
                        this.formItem.upkeepTypeId = upkeepContent.value
                        this.getUpkeepCent(upkeepContent.value)
                    }   
                })
            },
            pickTeammates() {
                picker.pick({
                    items: this.chooseMatesList,
                    index:0,
                    // textColor:'#ffffff',
                    confirmTitleColor:'#f49428',
                    // cancelTitleColor:'#ffffff',
                    // titleColor: '#ffffff',
                    title: '请选择'
                }, event => {
                    if (event.result === 'success') {
                        var staff = this.myteamMatesList[event.data]
                        this.formItem.staff2Id = staff.value
                        this.formItem.staff2Name = staff.name
                        this.staff2Name = staff.name
                    }   
                })
            },
            getLatestUpkeepRecord(){
                let filter = {}
                filter.liftId = this.data.id
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method:'POST',
                    name: 'getLatestUpkeepRecord',
                    data: filter
                }).then(res =>{
                    if(res.success){
                        if(res.data.typeName){
                            this.lastUpkeepType = res.data.typeName + ':' + res.data.endTime
                        }
                    }else{
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }
                },error => {
                    this.$notice.toast({
                        message: '网络错误'
                    })
                })
            },
            getUpkeepTypeList(){
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method:'GET',
                    name: 'getUpkeepTypeList',
                }).then(res =>{
                    if(res.success){
                        //缓存
                        this.$storage.set('upkeepTypeList', JSON.stringify(res.data))
                        this.upkeepTypeList = res.data.map(function (item) {
                            return {
                                name: item.name,
                                value: item.id + ''
                            }
                        })
                        this.chooseTypeList = res.data.map(function (item) {
                            return item.name
                        })
                        if(this.data.status !== 0 && this.data.status !== 3 ){
                            this.upkeepType = this.upkeepTypeList.find((element) => (element.value == this.data.upkeepTypeId)).name
                            this.staff2Name = this.data.staff2Name
                            this.getUpkeepCent(this.data.upkeepTypeId)
                        }
                    }else{
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }
                },error => {
                    this.$notice.toast({
                        message: '网络错误'
                    })
                })
            },
            getUpkeepCent(id){
                let filter = {}
                filter.typeId = id
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method:'POST',
                    name: 'getUpkeepCent',
                    data: filter
                }).then(res =>{
                    if(res.success){
                        this.upkeepContentList = res.data
                    }else{
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }
                },error => {
                    this.$notice.toast({
                        message: '网络错误'
                    })
                })
            },
            getMyTeamMates(){
                let filter = {}
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method: 'GET',    
                    name: 'getMyTeamMates',
                    data: filter
                }).then(res => {
                    if(res.success){
                        //缓存
                        this.$storage.set('teamMates', JSON.stringify(res.data))
                        this.myteamMatesList = res.data.map(function (item) {
                            return {
                                name: item.name,
                                value: item.id + ''
                            }
                        })
                        this.chooseMatesList = res.data.map(function (item) {
                            return item.name
                        })
                    }else{
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }
                }, error => {
                    // this.$notice.toast({
                    //     message: '网络错误'
                    // })
                })
            },
            //接单
            acceptUpkeep(){
                let filter = {}
                //非年检
                if(this.data.upkeepNumber){
                    filter.upkeepId = this.data.upkeepId
                    filter.upkeepTypeId = this.formItem.upkeepTypeId
                    filter.staff2Id = this.formItem.staff2Id
                }
                //年检单
                else{
                    filter.upkeepTypeId = this.formItem.upkeepTypeId
                    filter.nextAnnual = this.data.nextAnnual
                    filter.staff2Id = this.formItem.staff2Id
                    filter.liftId = this.data.id
                }
                if (!filter.upkeepTypeId) {
                    this.$notice.toast({
                        message: '请选择保养类型'
                    })
                    return
                }
                if (!filter.staff2Id) {
                    this.$notice.toast({
                        message: '请选择维保人员二'
                    })
                    return
                }
                this.showLoading = true
                filter.staff2Name = this.formItem.staff2Name
                //接普通单
                if(this.data.upkeepNumber){
                    this.$fetch({
                        header:{
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'Authorization': `Bearer `+ this.token
                        },
                        method: 'POST',    
                        name: 'makeUpkeep',
                        data: filter
                    }).then(res => {
                        this.showLoading = false
                        if(res.success){
                            this.$notice.toast({
                                message: '接单成功'
                            })
                            //缓存保单
                            this.$storage.set('upkeepDetail_'+res.data.upkeepNumber, JSON.stringify(res.data))
                            this.data = res.data
                        }else{
                            this.$notice.toast({
                                message: res.data
                            })
                        }
                    }, error => {
                        this.showLoading = false
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    })  
                }else{
                    //接年检单
                    this.$fetch({
                        header:{
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'Authorization': `Bearer `+ this.token
                        },
                        method: 'POST',    
                        name: 'makeAnnualUpkeep',
                        data: filter
                    }).then(res => {
                        this.showLoading = false
                        if(res.success){
                            this.$notice.toast({
                                message: '接单成功'
                            })
                            //缓存保单
                            this.$storage.set('upkeepDetail_'+res.data.upkeepNumber, JSON.stringify(res.data))
                            this.data = res.data
                        }else{
                            this.$notice.toast({
                                message: res.data
                            })
                        }
                    }, error => {
                        this.showLoading = false
                        this.$notice.toast({
                            message: '网络错误'
                        })
                    }) 
                }
            },
            backUpkeep(){
                this.showLoading = true
                let filter = {}
                filter.upkeepId = this.data.upkeepId
                this.$fetch({
                        header:{
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'Authorization': `Bearer `+ this.token
                        },
                        method: 'POST',    
                        name: 'backUpkeep',
                        data: filter
                }).then(res => {
                    this.showLoading = false
                    if(res.success){
                        this.$notice.toast({
                            message: '退单成功'
                        })
                        //缓存保单
                        this.$storage.set('upkeepDetail_'+res.data.upkeepNumber, JSON.stringify(res.data))
                        this.data = res.data
                        this.formItem = {}
                        this.upkeepType = ''
                        this.staff2Name = ''
                        this.upkeepContentList = []
                        
                    }else{
                        this.$notice.toast({
                            message: res.data
                        })
                    }
                }, error => {
                    this.showLoading = false
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }) 
            },
            handleComplete(){
                this.showLoading = true
                let filter = {}
                filter.upkeepId = this.data.upkeepId
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method: 'POST',    
                    name: 'checkPhotoAndApply',
                    data: filter
                }).then(res => {
                    if(res.success){
                        //跳转保养项目确认页
                        this.$router.open({
                            name: 'confirmPolicy',
                            params:{upkeepDetail:this.data}
                        })
                    }else{
                        this.$notice.toast({
                            message: res.data
                        })
                    }
                    this.showLoading = false
                }, error => {
                    this.showLoading = false
                    this.$notice.toast({
                        message: '网络错误'
                    })
                }) 
            },
            onSliderChange(e){
                var index = e.index;
                this.currentTab=index;
            },
        },
        created(){
            this.$notice.loading.show()
            const tabPageHeight = Utils.env.getPageHeight()
            //100:tab高度
            this.containerHeight = tabPageHeight-135
            this.scrollerStyle ={ height: this.containerHeight + 'px' }

            //获取token
            this.token = this.$storage.getSync('token')
            if(!this.token){
                this.$router.setHomePage('/pages/login.js')
            }

            this.$router.getParams().then(resData => {
                if(resData.upkeepId){
                    //从缓存获取维保单详情
                    this.$storage.get('upkeepDetail_'+resData.upkeepId).then(resData => {
                        this.data = JSON.parse(resData);
                        this.getLatestUpkeepRecord()

                        //从缓存获取维保类型列表
                        this.$storage.get('upkeepTypeList').then(resData => {
                            var jsonData = JSON.parse(resData);
                            this.upkeepTypeList = jsonData.map(function (item) {
                                return {
                                    name: item.name,
                                    value: item.id + ''
                                }
                            })
                            this.chooseTypeList = jsonData.map(function (item) {
                                return item.name
                            })
                            if(this.data.status !== 0 && this.data.status !== 3 ){
                                this.upkeepType = this.upkeepTypeList.find((element) => (element.value == this.data.upkeepTypeId)).name
                                this.staff2Name = this.data.staff2Name
                                this.getUpkeepCent(this.data.upkeepTypeId)
                            }
                        },error => {
                            this.getUpkeepTypeList()
                        })
                    })
                }else{
                    //获取电梯信息（年检单）
                    this.data = resData.liftResult
                    this.data.status = 0
                    //从缓存获取维保类型列表
                    this.$storage.get('upkeepTypeList').then(resData => {
                        var jsonData = JSON.parse(resData);
                        this.upkeepTypeList = jsonData.map(function (item) {
                            return {
                                name: item.name,
                                value: item.id + ''
                            }
                        })
                        this.chooseTypeList = jsonData.map(function (item) {
                            return item.name
                        })
                    },error => {
                        this.getUpkeepTypeList()
                    })
                }
                
            })
            
            //从缓存获取小组成员
            this.$storage.get('teamMates').then(resData => {
                var jsonData = JSON.parse(resData);
                this.myteamMatesList = jsonData.map(function (item) {
                    return {
                        name: item.name,
                        value: item.id + ''
                    }
                })
                this.chooseMatesList =jsonData.map(function (item) {
                    return item.name
                })
            },error => {
                this.getMyTeamMates()
            })
            this.$notice.loading.hide()
        }
    }
</script>

<style scoped>
    .slider{
        flex:1;
    }
    .slider-item{
        width: 750px;
        justify-content: center;
        align-items: center;
    }
    .container {
        /* flex: 1; */
        width: 750px;
        background-color: #f2f3f4;
        margin-top: 20px;
    }
    .div-button{
        flex-direction: row;
        justify-content: space-around;
        margin-top: 20px;
    }   
</style>
